<template>
  <view class="numInput">
    <view class="numInput-minus" @tap="minusClick">
      <image
        v-if="inputNumber === 1"
        src="@/pagesA/static/images/common/icon_minus_disable.png"
      >
      </image>
      <image v-else src="@/pagesA/static/images/common/icon_minus.png"> </image>
    </view>
    <input
      class="numInput-input"
      border="none"
      v-model="inputNumber"
      number
      color="#111111"
      fontSize="24rpx"
      @focus="focus"
      @blur="blur"
      @change="change"
    ></input>
    <view class="numInput-plus" @tap="plusClick">
        <image
        v-if="inputNumber === 100"
        src="@/pagesA/static/images/common/icon_plus_disable.png"
      >
      </image>
      <image v-else src="@/pagesA/static/images/common/icon_plus.png"> </image>
    </view>
  </view>
</template>

<script setup lang="ts">

import { ref } from 'vue'
import kkToast from "@/utils/kkToast";

const inputNumber = ref()

const initNumber = (value: number) => {
   if (value > 0) {
     inputNumber.value = value
   }
}

const change = (e: any) => {
  inputNumber.value = Number(e.detail.value)
   if (inputNumber.value && Number(inputNumber.value) >= 1 && Number(inputNumber.value) <= 100) {
      emit("confirmCalculateNum",inputNumber.value)
   } else {
     if (e.detail.value) {
       inputNumber.value = 1
       kkToast.showToast('仅允许输入1到100之间的正整数')
     } else {
       kkToast.showToast('请输入核算问题数')
    }
  }
}

const minusClick = () => {
  if (inputNumber.value > 1) {
    inputNumber.value -= 1
    emit("confirmCalculateNum", inputNumber.value)
  } 
}

const plusClick = () => {
  if (inputNumber.value < 100) {
    inputNumber.value += 1
    emit("confirmCalculateNum", inputNumber.value)
  }
}

const focus = () => {
  emit('focus')
 }
const blur = () => {
  emit('blur')
  if (inputNumber.value && Number(inputNumber.value) >= 1 && Number(inputNumber.value) <= 100) {
      emit("confirmCalculateNum",inputNumber.value)
  } else {
    if (inputNumber.value) {
       inputNumber.value = 1
       kkToast.showToast('仅允许输入1到100之间的正整数')
     } else {
       kkToast.showToast('请输入核算问题数')
    }
  }
}


const emit = defineEmits([
  "focus",
  "blur",
  'confirmCalculateNum'
]);
defineExpose({ initNumber });

</script>

<style lang="scss" scoped>
.numInput {
  height: 48rpx;
  background: #f7f7f7;
  border-radius: 12rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 162rpx;
  &-minus {
    width: 40rpx;
    height: 40rpx;
    border-radius: 8rpx;
    background: #fff;
    margin-left: 4rpx;
    image {
      margin-top: 4rpx;
      margin-left: 4rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }

  &-input {
    width: 50rpx;
    margin-left: 15rpx;
    margin-right: 15rpx;
    text-align: center;
  }

  &-plus {
    width: 40rpx;
    height: 40rpx;
    background: #fff;
    border-radius: 8rpx;
    margin-right: 4rpx;

    image {
      margin-top: 4rpx;
      margin-left: 4rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }
}
:deep(.uni-input-input) {
  text-align: center;
}
:deep(.u-input__content__field-wrapper) {
  text-align: center;
}
</style>
